<template>
    <div>
        <hd-tab :tabs="tabs"></hd-tab>

        <el-card :body-style="{ padding: '20px' }" shadow="never">
            <div slot="header">
                模型列表
            </div>
            <el-table
                :border="true"
                :data="form"
                size="mini"
                style="width: 100%">
                <el-table-column
                    label="ID"
                    prop="id"
                    width="180">
                </el-table-column>
                <el-table-column
                    label="名称"
                    prop="title"
                    width="180">
                </el-table-column>
                <el-table-column
                    #default="{row:r}"
                    label="创建时间"
                >
                    {{ r.created_at | dateFormat() }}
                </el-table-column>
                <el-table-column
                    #default="{row:r}"
                    label="操作"
                >
                    <el-button-group>
                        <el-button size="small" type="success"
                                   @click="$router.push({name:'admin.article.edit', params:{ id: r.id }})">编辑
                        </el-button>
                        <el-button size="small" type="danger" @click="Del(r)">删除</el-button>
                        <el-button size="small" type="primary"
                                   @click="$router.push({name:'admin.field.index', params:{ id: r.id }})">字段管理
                        </el-button>
                    </el-button-group>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
import tabs from './tabs'

export default {
    route: {name: 'admin.article.index', meta: {title: '模型列表'}},
    data() {
        return {
            form: [],
            tabs
        }
    },
    async created() {
        this.form = await this.axios.get('admin/article')
    },
    methods: {
        async Del(r) {
            if (r.categories.length !== 0) {
                this.$confirm(`确定删除【${r.title}】?将同步删除其下【${_.join(r.categories, '|')}】`, '危险操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error'
                }).then(async () => {
                    this.$notify({
                        title: '您已经删除了如下栏目',
                        message: _.join(r.categories, '|'),
                        offset: 100
                    });
                    await this.axios.delete(`admin/article/${r.id}`)
                    this.form.splice(this.form.indexOf(r), 1)
                })
            } else {
                await this.axios.delete(`admin/article/${r.id}`)
                this.form.splice(this.form.indexOf(r), 1)
            }
        },

    }
}
</script>

<style scoped>

</style>
